<template>
  <div id="app">
    <section class="todoapp">
      <!-- 头部 -->
      <vueHeader></vueHeader>
      <!-- 主体 -->
      <vueMain></vueMain>
      <!-- 底部 -->
      <vueFooter></vueFooter>
    </section>
    <footer class="info">
      <p>Double-click to edit a todo</p>
      <!-- Remove the below line ↓ -->
      <p>
        Template by
        <a href="http://sindresorhus.com">Sindre Sorhus</a>
      </p>
      <!-- Change this out with your name and url ↓ -->
      <p>
        Created by
        <a href="http://todomvc.com">you</a>
      </p>
      <p>
        Part of
        <a href="http://todomvc.com">TodoMVC</a>
      </p>
    </footer>
  </div>
</template>

<script>
// 引入组件
import vueHeader from "./components/header";
import vueMain from "./components/main";
import vueFooter from "./components/footer";
export default {
  name: "app",
  components: {
    vueHeader,
    vueMain,
    vueFooter
  }
};
</script>

<style>
</style>
